<template>
  <div>
    <div class="man" v-for="(v, i) in arr1" :key="i">
      <div class="tit">
        <div class="toux">
          <img :src="v.yunquanSongImg" alt="" />
        </div>
        <div class="tit-p">
          <p class="p2"><span>兮溪熙曦</span>{{ v.yunquanWord }}：</p>
          <p class="p3">昨天05：36</p>
        </div>
      </div>
      <p class="p4 ph">{{ v.yuquanContent }}</p>
      <div class="icon">
        -
        <i class="iconfont icon-Star"></i>
        <i class="iconfont icon-Star"></i>
        <i class="iconfont icon-Star"></i>
      </div>
      <img :src="v.yuquanImg" class="img1" />

      <ul>
        <li>
          <i class="iconfont icon-zhuanfa"></i><span class="span1">转发</span>
        </li>
        <li><i class="iconfont icon-xinxi"></i><span class="span1">6</span></li>
        <li>
          <i class="iconfont icon-dianzan"></i><span class="span1">14</span>
        </li>
        <li><i class="iconfont icon-ziyuan"></i></li>
      </ul>
      <div class="ms">
        <!-- <img :src="v.musicianSongimg" class="img2" /> -->
        <audio :src="v.yunquanSongUrl" controls></audio>
      </div>
    </div>
  </div>
</template>

<script>
import { getdata } from "@/api/getlink";
export default {
  data() {
    return {
      arr1: [],
    };
  },
  created() {
    //43n31i8727.zicp.vip/yunquan/findById?quanID=1
    // http:
    getdata("/proxy/yunquan/findById", {
      quanID: this.$route.query.id,
    }).then((ok) => {
      console.log(ok.data.data);
      this.arr1 = ok.data.data;
    });
    //     getlink("/YunQan/yunquan/findAll").then((ok) => {
    //     console.log(ok.data.data);
    //     this.arr = ok.data.data;
    //   });
    // },
  },
};
</script>

<style scoped>
.man {
  margin-top: 2.5rem;
  padding-left: 00.35rem;
  padding-right: 0.35rem;
}
.tit-p {
  margin-left: 0.3rem;
}

.toux {
  width: 0.7rem;
  height: 0.77rem;
  border-radius: 50%;
}
img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
span:nth-of-type(1) {
  color: #577caa;
  font-size: 0.27rem;
}

.p2 {
  color: #6b6b6b;
  font-size: 0.27rem;
}
.tit {
  display: flex;
  flex-direction: row;
}
.p3 {
  margin-top: 0.12rem;
  color: #8e8e8e;
  font-size: 0.2rem;
}

.icon-Star {
  color: #f9dd67;
  font-size: 0.33rem;
}
.p4 {
  color: #262626;
  font-size: 0.26rem;
  font-weight: 550;
}
.ph {
  margin-bottom: 0.2rem;
  margin-top: 0.4rem;
}
.icon {
  margin-top: 0.2rem;
  margin-bottom: 0.25rem;
}
.img1 {
  border-radius: 0.15rem;
  width: 4.5rem;
  height: 3.5rem;
  margin-left: 1rem;
}

ul {
  height: 1.05rem;
  margin-left: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
li > .iconfont {
  font-size: 0.31rem;
  color: #595758;
}
li > .span1 {
  font-size: 0.2rem;
  color: #bfbdbe;
}
.icon-ziyuan {
  color: #dbd9da;
}
audio {
  width: 3.3rem;
  height: 0.75rem;
  border-radius: 0.01rem;
  margin-left: 0.15rem;
  margin-top: 0.12rem;
  float: left;
  margin-right: 0.12rem;
}
</style>